<template>
  <div class="main-content">
    <div class="mv">
      <div class="current-video">
        <div class="video">
          <div tabindex="0" class="plyr plyr--full-ui plyr--video plyr--html5 plyr--paused plyr--stopped plyr--pip-supported plyr--fullscreen-enabled plyr__poster-enabled">
            <div class="plyr__controls">
              <button class="plyr__controls__item plyr__control" type="button" data-plyr="play" aria-label="Play">
                <svg-icon icon-class="plyr-pause" class="icon--pressed" focusable="false"></svg-icon>
                <svg-icon icon-class="plyr-play" class="icon--not-pressed" focusable="false"></svg-icon>
                <span class="label--pressed plyr__sr-only">Pause</span>
                <span class="label--not-pressed plyr__sr-only">Play</span>
              </button>
              <div class="plyr__controls__item plyr__progress__container">
                <div class="plyr__progress">
                  <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" autocomplete="off" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="220.042" aria-valuenow="0" id="plyr-seek-2808" aria-valuetext="00:00 of 00:00" style="--value:0%;">
                  <progress class="plyr__progress__buffer" min="0" max="100" value="2.2286654365984675" role="progressbar" aria-hidden="true">% buffered</progress>
                  <span class="plyr__tooltip">00:00</span>
                </div>
              </div>
              <div class="plyr__controls__item plyr__time--current plyr__time" aria-label="Current time">03:40</div>
              <div class="plyr__controls__item plyr__volume">
                <button type="button" class="plyr__control" data-plyr="mute">
                  <svg-icon icon-class="plyr-muted" class="icon--pressed" focusable="false"></svg-icon>
                  <svg-icon icon-class="plyr-volume" class="icon--not-pressed" focusable="false"></svg-icon>
                  <span class="label--pressed plyr__sr-only">Unmute</span>
                  <span class="label--not-pressed plyr__sr-only">Mute</span>
                </button>
                <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="0.94" autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="95" id="plyr-volume-2808" aria-valuetext="95.0%" style="--value:95%;">
              </div>
              <button class="plyr__controls__item plyr__control" type="button" data-plyr="captions">
                <svg-icon icon-class="plyr-captions-on" class="icon--pressed" focusable="false"></svg-icon>
                <svg-icon icon-class="plyr-captions-off" class="icon--not-pressed" focusable="false"></svg-icon>
                <span class="label--pressed plyr__sr-only">Disable captions</span>
                <span class="label--not-pressed plyr__sr-only">Enable captions</span>
              </button>
              <div class="plyr__controls__item plyr__menu">
                <button aria-haspopup="true" aria-controls="plyr-settings-2808" aria-expanded="false" type="button" class="plyr__control" data-plyr="settings">
                  <svg-icon icon-class="plyr-settings" focusable="false"></svg-icon>
                  <span class="plyr__sr-only">Settings</span>
                </button>
                <div class="plyr__menu__container" id="plyr-settings-2808" hidden="">
                  <div>
                    <div id="plyr-settings-2808-home">
                      <div role="menu">
                        <button data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
                          <span>Quality
                            <span class="plyr__menu__value">1080p</span>
                          </span>
                        </button>
                      </div>
                    </div>
                    <div id="plyr-settings-2808-quality" hidden="">
                      <button type="button" class="plyr__control plyr__control--back">
                        <span aria-hidden="true">Quality</span>
                        <span class="plyr__sr-only">Go back to previous menu</span>
                      </button>
                      <div role="menu">
                        <button data-plyr="quality" type="button" role="menuitemradio" class="plyr__control" aria-checked="true" value="1080">
                          <span>1080p
                            <span class="plyr__menu__value">
                              <span class="plyr__badge">HD</span>
                            </span>
                          </span>
                        </button>
                        <button data-plyr="quality" type="button" role="menuitemradio" class="plyr__control" aria-checked="false" value="720">
                          <span>720p
                            <span class="plyr__menu__value">
                              <span class="plyr__badge">HD</span>
                            </span>
                          </span>
                        </button>
                        <button data-plyr="quality" type="button" role="menuitemradio" class="plyr__control" aria-checked="false" value="480">
                          <span>480p
                            <span class="plyr__menu__value">
                              <span class="plyr__badge">SD</span>
                            </span>
                          </span>
                        </button>
                        <button data-plyr="quality" type="button" role="menuitemradio" class="plyr__control" aria-checked="false" value="240">
                          <span>240p</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <button class="plyr__controls__item plyr__control" type="button" data-plyr="pip">
                <svg-icon icon-class="plyr-pip" focusable="false"></svg-icon>
                <span class="plyr__sr-only">PIP</span>
              </button>
              <button class="plyr__controls__item plyr__control" type="button" data-plyr="fullscreen">
                <svg-icon icon-class="plyr-exit-fullscreen" class="icon--pressed" focusable="false"></svg-icon>
                <svg-icon icon-class="plyr-enter-fullscreen" class="icon--not-pressed" focusable="false"></svg-icon>
                <span class="label--pressed plyr__sr-only">Exit fullscreen</span>
                <span class="label--not-pressed plyr__sr-only">Enter fullscreen</span>
              </button>
            </div>
            <div class="plyr__video-wrapper">
              <div data-vjs-player>
                  <PlyrMv :src="mvUrl" type="video/mp4" ></PlyrMv>
              </div>
              <div class="plyr__poster" :style="{backgroundImage:`url(${mvDetail.cover})`}"></div>
            </div>
            <div class="plyr__captions"></div>
            <button type="button" class="plyr__control plyr__control--overlaid">
              <svg-icon icon-class="play" class="svg-icon"></svg-icon>
              <span class="plyr__sr-only">Play</span>
            </button>
          </div>
        </div>
        <div class="video-info">
          <div class="title">
            <a href="#/artist/12138269" class="">{{mvDetail.artistName}}</a>
            - {{mvDetail.name}}
            <div class="like-button">
              <button  class="button-icon">
                <svg-icon icon-class="heart-solid" class="svg-icon"></svg-icon>
              </button>
            </div>
          </div>
          <div class="info"> {{(mvDetail.playCount/10000).toFixed(1)}}万 Views · {{mvDetail.publishTime}} </div>
        </div>
      </div>
      <div class="more-video">
        <div class="section-title">更多视频</div>
        <div class="mv-row">
          <div class="mv" v-for="item in moreMv" :key="item.id">
            <div class="cover">
              <img :src="item.cover">
              <div class="shadow" :style="{background:`url(${item.cover})`}"></div>
            </div>
            <div class="info">
              <div class="title">
                <a href="#/mv/5739074" class="">{{item.name}}</a>
              </div>
              <div class="artist">
                <a href="/#/artist/12138269">{{item.artistName}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlyrMv from '../../components/Play/PlyrMv';

export default {
  name: 'PlaymusicMv',
  data() {
    return {
      mvDetail: {},
      moreMv: [],
      mvUrl: '',
    };
  },
  components: {
    PlyrMv,
  },
  methods: {
  },
  created() {
    this.$simiMv({
      // cookie: store.get('user').cookie,
      mvid: this.$route.params.vid,
    }).then((res) => {
      // eslint-disable-next-line no-console
      // console.log(res.data.mvs);
      this.moreMv = res.data.mvs;
    }).catch((err) => {
      // eslint-disable-next-line no-console
      console.log(err);
    });
    this.$mvDetail({
      // cookie: store.get('user').cookie,
      mvid: this.$route.params.vid,
    }).then((res) => {
      // eslint-disable-next-line no-console
      this.mvDetail = res.data.data;
      this.$mvUrl({
        r: 1080,
        id: res.data.data.id,
      }).then((res1) => {
        this.mvUrl = res1.data.data.url;
      });
    }).catch((err) => {
      // eslint-disable-next-line no-console
      console.log(err);
    });
  },
};
</script>

<style lang="scss" scoped>
.current-video, .mv{
    width: 100%;
}
.more-video{
    margin-top: 48px;
}
.video {
    border-radius: 16px;
    background: transparent;
    overflow: hidden;
    max-height: 100vh;
    --plyr-color-main: #335eea;
    --plyr-control-radius: 8px;
}
.video-info {
    margin-top: 12px;
    color: var(--color-text);
}
.plyr--video {
    overflow: hidden;
}
.plyr--full-ui {
    box-sizing: border-box;
}
.plyr {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    align-items: center;
    direction: ltr;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-family: var(--plyr-font-family,inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-weight: var(--plyr-font-weight-regular,400);
    height: 100%;
    line-height: 1.7;
    line-height: var(--plyr-line-height,1.7);
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease;
    z-index: 0;
}
.plyr--video .plyr__controls {
    background: linear-gradient(transparent,rgba(0,0,0,.75));
    background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    bottom: 0;
    color: #fff;
    color: var(--plyr-video-control-color,#fff);
    left: 0;
    padding: 5px;
    padding: calc(var(--plyr-control-spacing, 10px)/2);
    padding-top: 20px;
    padding-top: calc(var(--plyr-control-spacing, 10px)*2);
    position: absolute;
    right: 0;
    transition: opacity .4s ease-in-out,transform .4s ease-in-out;
    z-index: 3;
}
.plyr__controls {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    text-align: center;
}
.plyr--full-ui *, .plyr--full-ui :after, .plyr--full-ui :before {
    box-sizing: inherit;
}
.plyr__video-wrapper {
    height: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {
    transform: translateY(-40px);
    transform: translateY(calc(var(--plyr-control-spacing, 10px)*-4));
}
.plyr__captions {
    -webkit-animation: plyr-fade-in .3s ease;
    animation: plyr-fade-in .3s ease;
    bottom: 0;
    display: none;
    font-size: 13px;
    font-size: var(--plyr-font-size-small,13px);
    left: 0;
    padding: 10px;
    padding: var(--plyr-control-spacing,10px);
    position: absolute;
    text-align: center;
    transition: transform .4s ease-in-out;
    width: 100%;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: block;
}
.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
    touch-action: manipulation;
}
.plyr button {
    font: inherit;
    line-height: inherit;
    width: auto;
}
.plyr__control {
    background: 0 0;
    border: 0;
    border-radius: 3px;
    border-radius: var(--plyr-control-radius,3px);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    padding: 7px;
    padding: calc(var(--plyr-control-spacing, 10px)*0.7);
    position: relative;
    transition: all .3s ease;
    &:hover{
      opacity: 1;
    }
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
    padding-left: 2.5px;
    padding-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__progress__container {
    flex: 1;
    min-width: 0;
}
.plyr__controls .plyr__controls__item.plyr__time {
    padding: 0 5px;
    padding: 0 calc(var(--plyr-control-spacing, 10px)/2);
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__time {
    font-size: 13px;
    font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__volume {
    align-items: center;
    display: flex;
    max-width: 110px;
    min-width: 80px;
    position: relative;
    width: 20%;
}
.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip], .plyr__controls:empty {
    display: none;
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr button {
    font: inherit;
    line-height: inherit;
    width: auto;
}
.plyr__control {
    background: 0 0;
    border: 0;
    border-radius: 3px;
    border-radius: var(--plyr-control-radius,3px);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    padding: 7px;
    padding: calc(var(--plyr-control-spacing, 10px)*0.7);
    position: relative;
    transition: all .3s ease;
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__menu {
    display: flex;
    position: relative;
}
.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
    display: inline-block;
}
.plyr__controls .plyr__controls__item {
    margin-left: 2.5px;
    margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr audio, .plyr iframe, .plyr video {
    display: block;
    height: 100%;
    width: 100%;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
    opacity: 1;
    overflow: hidden;
}
.plyr__poster {
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease;
    width: 100%;
    z-index: 1;
}
.plyr__control--overlaid svg {
    left: 2px;
    position: relative;
}
.plyr__sr-only {
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
    border: 0!important;
    height: 1px!important;
    padding: 0!important;
    position: absolute!important;
    width: 1px!important;
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.like-button {
    display: inline-block;
}
button:first-child {
    margin-left: 0;
}
button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: transparent;
    margin: 4px;
    border-radius: 25%;
    transition: .2s;
    border: none;
}
.like-button .svg-icon {
    height: 18px;
    width: 18px;
    color: var(--color-primary);
}
.more-video .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    opacity: .88;
}
.mv-row {
    --col-num: 5;
    display: grid;
    grid-template-columns: repeat(var(--col-num),1fr);
    gap: 36px 24px;
    padding: var(--main-content-padding);
}
.mv {
    color: var(--color-text);
}
.cover {
    position: relative;
    transition: transform .3s;
}
img {
    border-radius: .75em;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.shadow {
    display: none;
    position: absolute;
    top: 6px;
    height: 100%;
    width: 100%;
    filter: blur(16px) opacity(.4);
    transform: scale(.9);
    z-index: -1;
    background-size: cover;
    border-radius: .75em;
}
.player {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 64px;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    background-color: var(--color-navbar-bg);
    z-index: 100;
}
.progress-bar {
    margin-top: -6px;
    margin-bottom: -6px;
    width: 100%;
}
.controls {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    height: 100%;
    padding-right: 10vw;
    padding-left: 10vw;
}
.vue-slider {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.vue-slider-rail {
    position: relative;
    width: 100%;
    height: 100%;
    transition-property: width,height,left,right,top,bottom;
    background-color: hsla(0,0%,50.2%,.18);
    border-radius: 15px;
}
.vue-slider-process {
    position: absolute;
    z-index: 1;
    background-color: #335eea;
    border-radius: 15px;
}
.vue-slider-dot {
    position: absolute;
    -webkit-transition: all 0s;
    transition: all 0s;
    z-index: 5;
}
.vue-slider-dot-handle {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.12);
    visibility: hidden;
}
.vue-slider-dot-tooltip-top {
    top: -10px;
    left: 50%;
    -webkit-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
}
.vue-slider-dot-tooltip {
    position: absolute;
    visibility: hidden;
}
.vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 6px;
    min-width: 20px;
    text-align: center;
    color: #000;
    border-radius: 5px;
    border-color: #fff;
    background-color: #fff;
    box-sizing: content-box;
    box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.8);
}
.mv .title{
    font-size: 16px;
    font-weight: 600;
    opacity: .88;
    word-break: break-all;
    a:hover{
      text-decoration: underline;
    }
}
.mv .artist{
    font-size: 12px;
    opacity: .68;
}
.video-info .title {
    font-size: 24px;
    font-weight: 600;
}
.video-info .info {
    font-size: 12px;
    opacity: .68;
    margin-top: 12px;
}
.plyr__control--overlaid {
    background: #00b3ff;
    background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
    border: 0;
    border-radius: 100%;
    color: #fff;
    color: var(--plyr-video-control-color,#fff);
    display: none;
    left: 50%;
    opacity: .9;
    padding: 15px;
    padding: calc(var(--plyr-control-spacing, 10px)*1.5);
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: .3s;
    z-index: 2;
}
.plyr__control svg {
    display: block;
    fill: currentColor;
    height: 18px;
    height: var(--plyr-control-icon-size,18px);
    pointer-events: none;
    width: 18px;
    width: var(--plyr-control-icon-size,18px);
}
.cover:hover .shadow{
  display: block;
}
</style>
